<template>
  <div>
    <el-card>
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.path"
          :label="$t(`route.${item.children[0].meta.title}`)"
          :name="item.path"
        />
      </el-tabs>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'NavTab',
  data() {
    return {
      // 当前所在的值
      editableTabsValue: this.$route.path,
      editableTabs: [],
      tabIndex: 2
    }
  },
  watch: {
    editableTabsValue: {
      handler(newVal) {
        // console.log(this.$router)
        this.$router.push(newVal)
      }
    }
  },
  created() {
    this.editableTabs = this.$store.state.user.tableTabs
    // console.log(arr)

    // console.log(this.editableTabs)
  },

  methods: {
    removeTab(targetName) {
      //   console.log(this.editableTabsValue)
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      //   如果是首页就让路径变成'/'
      if (activeName === '/dashboard') {
        activeName = '/'
      }
      //   点击的tab是否是选中的那一个
      if (activeName === targetName) {
        // console.log(11)
        // 是，遍历所有tap
        tabs.forEach((tab, index) => {
          // 找到点击的那一个
          if (tab.path === targetName) {
            //   设置下一个激活状态的tap
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.path
            }
          }
        })
      }
      //   设置Vuex中的数组
      this.$store.commit('user/REMOVE_NavTabShow', targetName)
      //   设置激活的
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.path !== targetName)
    //   console.log(this.editableTabs)
    },
    aaa() {
      console.log(this)
    }
    // 跳转
    // jumpRouter(tap) {
    // //   console.log(tap.name)
    // //   this.$router.push(tap.name)
    // }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-card {
    height: 40px
 }

 ::v-deep .el-card__body {
    padding: 0px;
}
 ::v-deep .el-tabs__content{
        display:none
}
</style>
